<template>
  <div class="fund-center">
    <scroller ref="scroll" :on-refresh="refresh">
      <div class="wrap">
        <div class="searchGroup display-flex flex-direction-row">
          <div class="dateBox">
            <datetime class="selectDate display-flex flex-direction-row align-items-center justify-content-flex-center" v-model="startDate" @on-change="change"></datetime>
          </div>
          <p>至</p>
          <div class="dateBox">
            <datetime class="selectDate display-flex flex-direction-row align-items-center justify-content-flex-center" v-model="endDate" :start-date="startDate" @on-change="change"></datetime>
          </div>
          <x-button class="searchBtn" @click.native="comfirm"><span>确定</span></x-button>
        </div>
        <div class="jinhuo item vux-1px-b">
          <div class="title-bar display-flex">
            <div class="title0 flex-1">进货明细</div>
            <div class="title1 flex-1">合计：{{detail.replenishTotalAmount}}元</div>
            <x-button :class="{'shouqi':fold1==true,'zhankai':fold1==false}" @click.native="foldFn1">{{fold1==true?'收起':'展开'}}</x-button>
          </div>
          <div class="detail display-flex" v-for="item in replenishDetail" v-if="fold1==true">
            <div class="flex-1">{{item.dateStr}}</div>
            <div class="div-r flex-1">{{item.orderAmount}}元</div>
          </div>
        </div>
        <div class="order item">
          <div class="title-bar display-flex">
            <div class="title0 flex-1">订单明细</div>
            <div class="title1 flex-1">合计：{{detail.saleOrderTotalAmount}}元</div>
            <x-button :class="{'shouqi':fold2==true,'zhankai':fold2==false}" @click.native="foldFn2">{{fold2==true?'收起':'展开'}}</x-button>
          </div>
          <div class="detail display-flex" v-for="item in salesDetail" v-if="fold2==true">
            <div class="flex-1">{{item.dateStr}}</div>
            <div class="div-r flex-1">{{item.orderAmount}}元</div>
          </div>
        </div>
      </div>
    </scroller>
  </div>
</template>

<script src="./fundCenter.js"></script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .fund-center{
    width:100%;
    height: 100%;
    background-color: #fff;
    .wrap{
      padding: 0.3rem;
    }
    .searchGroup{
      p{
        margin: 0 .17rem;
        padding-top: 0.2rem;
      }
      .dateBox{
        border-radius: 8px;
        width: 2.34rem;
        height: 0.66rem;
        background-color: #f5f5f5;
        text-align: center;
        border: 1px solid #EBEBEB;
        .selectDate{
          width: 2.34rem;
          height: .66rem;
          border-radius: 4px;
          text-align: center;
          padding: 0;
        }
      }
      .searchBtn{
        width: 1.44rem;
        height: 0.66rem;
        text-align: center;
        background-color: #254075;
        color: #ffffff;
        border-radius: 8px;
        margin-left: 0.18rem;
        font-size: 16px;
        position: relative;
        span{
          position: relative;
          top:-0.05rem;
        }
      }
    }
    .item{
      padding-bottom: 0.3rem;
      padding-top: 0.3rem;
      .title-bar{
        height: 0.6rem;
        /*line-height: 0.6rem;*/
        margin-bottom: 0.1rem;
      }
      .title0{
        font-size: 0.32rem;
        font-weight: bolder;
        color: #333;
      }
      .title1{
        font-size: 0.32rem;
        color: #333;
      }
      .shouqi{
        width:1.35rem;
        font-size: 0.28rem;
        color: #666;
        background: url("../../../assets/img/user/arrow-t.png") no-repeat right center transparent;
        background-size: 0.2rem 0.14rem;
      }
      .zhankai{
        width:1.35rem;
        font-size: 0.28rem;
        color: #666;
        background: url("../../../assets/img/user/arrow-b.png") no-repeat right center transparent;
        background-size: 0.2rem 0.14rem;
      }
      .weui-btn:after{
        display: none;
      }
    }
    .detail{
      padding-right: 1.35rem;
      color: #666;
      font-size: 0.26rem;
      //line-height: 0.25rem;
      .div-r{
        text-align: right;
      }
    }
  }
</style>
